<template>
    <el-menu router default-active="2" class="XMenu_bigbox" :unique-opened="true" :collapse="isCollapse">
        <div class="logo">
            <!-- 自定义插槽 -->
            <slot v-if="!props.isCollapse" name="unfoldlogo"></slot>
            <slot v-else name="foldlogo"></slot>
        </div>
        <template v-for="item in navList" :key="item.titleName">
            <el-sub-menu v-if="item.children" :index="item.titleName">
                <template #title>
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <span v-if="!isCollapse">{{ item.titleName }}</span>
                </template>
                <el-menu-item v-for="child in item.children" :key="child.router" :index="child.router">
                    {{ child.name }}
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="item.router">
                <el-icon>
                    <component :is="item.icon" />
                </el-icon>
                <span v-if="!isCollapse">{{ item.titleName }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>
<script setup>
import { onMounted, shallowRef, watch, ref } from 'vue';
import { Mouse } from '@element-plus/icons-vue';
import data from '@/router/WebPageManagement'// 网页管理路由
import { userThemeStore } from '@/stores/userTheme.js'
// 使用 useUserThemeStore 来获取 store 实例
const userTheme = userThemeStore()
const WebPageManagementRouter = JSON.parse(JSON.stringify(data))
const props = defineProps({
    isCollapse: {
        type: Boolean,
        required: false
    }
});
const folderCorrespondingMenu = [
    {
        icon: Mouse,
        titleName: '其他页面',
        childrenName: "/AtherPage",
        children: []
    },
]
function initNavlist(WebPageManagementRouter, folderCorrespondingMenu) {
    for (let index = 0; index < WebPageManagementRouter.length; index++) {
        const obj = WebPageManagementRouter[index];
        const segments = obj.path.split('/');
        if (segments.length > 2) {
            const pathToMatch = '/' + segments[1];
            console.log(pathToMatch);
            for (let index2 = 0; index2 < folderCorrespondingMenu.length; index2++) {
                const element = folderCorrespondingMenu[index2].childrenName;
                console.log(element);
                if (pathToMatch === element) {
                    if(folderCorrespondingMenu[index2].children === undefined){
                        folderCorrespondingMenu[index2].children = [];
                    }
                    folderCorrespondingMenu[index2].children.push(obj);
                    // 移除已经添加的数据
                    WebPageManagementRouter.splice(index, 1);
                    index--;
                    break;
                }
            }
        }
    }
    console.log(folderCorrespondingMenu);
    // 把folderCorrespondingMenu内的每一项的children数组按照order字段排序
    for (let index = 0; index < folderCorrespondingMenu.length; index++) {
        const element = folderCorrespondingMenu[index].children;
        element.sort((a, b) => a.order - b.order);
    }
    return folderCorrespondingMenu;
}
const navList = shallowRef([])
// 监听userTheme.theme的变化
const theme = ref(false)
watch(() => userTheme.theme, (newVal) => {
    theme.value = newVal == 'light' ? false : true
})
onMounted(() => {
    theme.value = userTheme.theme == 'light' ? false : true
    console.log(WebPageManagementRouter);
    navList.value = initNavlist(WebPageManagementRouter, folderCorrespondingMenu)
})
</script>

<style scoped lang='scss'>
.XMenu_bigbox {
    border-radius: 5px;
    border: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: var(--all-transition);
    color: var(--text-color);
    background-color: var(--bg-color);
    .logo {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 25px;
        transition: var(--all-transition);
        background-color: var(--bg-color);
        color: var(--text-color);
        &:hover{
            cursor:default;
        }
    }
    .el-menu-item,
    .el-sub-menu {
        text-align: center;
        transition: var(--all-transition);
        font-weight: bolder;
        color: var(--text-color);
        background-color: var(--bg-color);

        &:hover{
            background-color: var(--home-menu-hover-color)!important;
        }
    }
    .el-sub-menu__title:hover{
        background-color: var(--home-menu-hover-color)!important;
}
    .el-icon {
        color: var(--home-text-color);
    }
    
    span {
        color: var(--text-color);
    }
}

.el-menu-item.is-active {
    // color: rgb(255, 255, 255);
    // background-color: rgba(32, 181, 249, 0.67) !important;
    color: var(--home-text-color);
}

// .el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover {
    background-color: var(--home-menu-hover-color) !important;
    // color: rgb(255, 255, 255);
    // font-weight: bolder;
}

</style>